import React from 'react';
import { Form } from 'antd';

import styles from './index.less';

interface InfoFormItemProps {
  label: string;
  children: any;
  width?: number;
  layout?: any;
  marginBottom?: number;
  labelAlign?: string;
}

const InfoFormItem: React.FC<InfoFormItemProps> = (
  props: InfoFormItemProps,
) => {
  const {
    label,
    children,
    width = '100%',
    layout,
    marginBottom,
    labelAlign,
  } = props;
  return (
    <Form.Item
      label={`${label}:`}
      style={{ marginBottom: marginBottom || 0 }}
      className={styles.info_item}
      labelAlign={labelAlign}
      {...layout}
    >
      <span
        style={{
          width,
          lineHeight: 2.4,
          wordWrap: 'break-word',
          display: 'inline-block',
        }}
        className={styles.text}
      >
        {children}
      </span>
    </Form.Item>
  );
};

export default InfoFormItem;
